<template>
	<view class="container">
		<view class="wechatapp">
			<view class="header">
				<open-data class="" type="userAvatarUrl"></open-data>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
			<button class="btn-normal" openType="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">授权登录</button>
		</view>
		<view class="no-login-btn">
			<button class="btn-normal" @click="onNotLogin">暂不登录</button>
		</view>

		<myModal ref="phoneModal" :maskCloseAble="false" @close="phoneFinish" width="680rpx" title="信息完善" titlebg="#772dd9">
			<view class="descript">
				您录入的手机号码，我们仅用于售后服务使用，绝对不会用作其他途径。
			</view>
			<view class="inputRow">
				<view class="inputContain">
					<input type="number" @blur='phoneValidetion' :value="phone" placeholder="请输入您的手机号码" />
				</view>
				<view class="countDown">
					<view class="countDownCon" v-if="responseCode">
						{{countDown}}秒后失效
					</view>
					<view class="sendcode" v-if="!responseCode" :style="{'background-color':phoneValide?'#e094c2':'#9f9f9f'}" @click="sendValide">
						发送验证码
					</view>
				</view>
			</view>
			<view class="inputRow">
				<view class="inputContain">
					<input type="text" @blur="valiCodeInput" :disabled="!phoneValide" placeholder="请输入验证码" :value="valideCode" />
				</view>
			</view>
			<view class="sendContain">
				<view class="cancleBtn" @click="phoneCancle">
					无情拒绝
				</view>
				<view class="btnCommit" @click="commitMobile">
					提交
				</view>
			</view>
		</myModal>
	</view>
</template>

<script>
	import myModal from "@/components/myModal/myModal"
	export default {
		components: {
			myModal
		},
		data() {
			return {
				phone: '',
				phoneValide: false,
				valideCode: '',
				codeValide: false,
				responseCode: false,
				allow: true,
				countDown: 60,
				allowLogin: true,
				interVal: null
			}
		},
		methods: {
			// 提交手机号码
			commitMobile() {
				if (!this.allow) {
					return
				}
				if (!this.phoneValide) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.responseCode) {
					uni.showToast({
						title: '请先点击发送验证码！',
						icon: 'none'
					})
					return
				}
				if (this.valideCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				this.allow = false
				let that = this
				this.$Request.request('/api/user/save_phone', 'POST', {
					mobile: that.phone,
					code: that.valideCode
				}).then(res => {
					if (res.status == 1) {
						uni.showToast({
							title: '手机号码保存成功！'
						})
						that.$nextTick(function() {
							that.$refs.phoneModal.close()
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 发送验证码
			sendValide() {
				if (!this.phoneValide) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				let that = this
				api('/api/user/send_phone_valid', 'POST', {
					mobile: that.phone
				}).then(res => {
					uni.showToast({
						title: '验证码发送成功！'
					})
					that.responseCode = true
					that.codeLife()
				}).catch(err => {
					console.log(err)
				})
			},
			codeLife() {
				let that = this
				that.interVal = setInterval(() => {
					let count = that.countDown
					count--
					if (count > 0) {
						that.countDown = count
					} else {
						that.responseCode = false
						clearInterval(that.interVal)
					}
				}, 1000)
			},
			// 拒绝录入手机号码
			phoneCancle() {
				this.$refs.phoneModal.close()
			},
			// 模态框关闭后的提示
			phoneFinish() {
				uni.navigateBack()
			},
			// 验证码输入验证
			valiCodeInput(e) {
				this.valideCode = e.detail.value
			},
			// 手机号码验证
			phoneValidetion(e) {
				this.phone = e.detail.value
				let phoneReg = /^1[3456789]\d{9}$/
				this.phoneValide = phoneReg.test(this.phone)
				if (!this.phoneValide) {
					uni.showToast({
						title: '手机号码输入有误',
						icon: 'none'
					})
				}
			},
			// 授权获取微信用户信息
			getUserInfo(e) {
				if (!this.allowLogin) {
					return
				}
				let userInfo = e.detail.userInfo
				this.allowLogin = false
				let that = this
				uni.login({
					provider: "weixin",
					success(res) {
						let code = res.code

						api("/api/user/login", "POST", {
								code,
								user_info: e.detail.rawData,
								encrypted_data: e.detail.encryptedData,
								iv: e.detail.iv,
								signature: e.detail.signature,
								referee_id: wx.getStorageSync('userId')
							}

						).then(res => {
							console.log(res)
							that.allowLogin = true
							let loginInfo = res.data
							uni.setStorageSync("token", loginInfo.token)
							uni.setStorageSync("userId", loginInfo.user_id)
							uni.setStorageSync("userInfo", userInfo)
							if (!loginInfo.mobile) {
								that.$refs.phoneModal.open()
							} else {
								userInfo.mobile = loginInfo.mobile
								uni.setStorageSync("userInfo", userInfo)
								uni.showToast({
									title: "登录成功"

								})
								that.$nextTick(function() {
									uni.navigateBack();
								})
							}



						}).catch(err => {
							that.allowLogin = true
							console.log(err)
							uni.showToast({
								title: err.msg,
								icon: "none"
							})
						})
					}
				})
			},
			onNotLogin() {
				uni.showToast({
					title: "登录已取消",
					icon: 'none',
					complete() {
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./login.scss";
</style>
